<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="top">
					<text class="top-title">{{title}}</text>
					<icon class="close-btn" type="clear" size="26" @click="close" />
					<!-- <image src="/static/img/scan.png"  @click="scanLocation"
					style="width: 40px; height: 50px;"class="top-scan"></image> -->
				    <view class="top_btn" @click="commendLocation()"> 推荐仓位</view>
				</view>
				
				<scroll-view class="scroll-height" scroll-y="true">
					<view class="list">
						<view v-for="(data, index) in dataList" class="list-item">
							<text class="list-item-name" :class="{error: data.error}">{{ data.materialName }}</text>
							<view class="list-item-val">
								<view class="nowrap">
									<text class="val-title">编码</text><span class="font">：</span>
									<text class="val-content">{{ data.fmaterialnumber || "-" }}</text>
								</view>
								<view class="nowrap" v-if="data.fmaterialname">
									<text class="val-title">名称</text><span class="font">：</span><text
										class="val-content">{{ data.fmaterialname }}</text>
								</view>
								<view class="nowrap" v-if="data.locationno">
									<text class="val-title">仓位</text><span class="font">：</span><text
										class="val-content">{{ data.locationno }}</text>
								</view>
								
								<view class="nowrap" >
									<text class="val-title">库存数量</text><span class="font">：</span><text
										class="val-content">{{ data.fbaseqty }}</text>
								</view>
								<view class="nowrap" >
									<text class="val-title">数量</text><span class="font">：</span>
									<input type="number" inputmode = "numeric" class="val-input" 
									 @input="inputClick(data)"
									 v-model="data.fqty">
									
									 <view class="val-button" @click="updateFqty(data)">修改</view> 
								</view>
							</view>
							<template >
								<icon  class="item-delete-btn"
									type="cancel" size="26" @click="deleteItem(data, index)" />
									
							</template>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</uni-popup>
		<!-- 推荐仓位-->
		<Commend ref="commendRef" @back="back"></Commend>
		<!-- 扫描仓位吗 -->
		<task-popup ref="taskPopupRef" @success="taskScanningSucess"></task-popup>
	</view>
	
	
</template>

<script>
	import Commend from "@/pages/pop/commend-scan.vue"
	import TaskPopup from '../../components/popup/task-popup.vue'
	import {commendLocation,
	deletePickMaterial,
	updatePickCount} from '@/utils/api.js'
	
	export default {
		components: {
			Commend,
			TaskPopup
		},
		emits: ['delete', ],
		props: {
			hiddenDelete: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type: null,
				title: '',
				billNo : '',
				material : {},
				type: 'center',
				dataList: [],
				materialNo : '',
				FPRDORGID : '',
				bomId : '',
				count : 0,//应发数量
				commedList :[]//推荐仓位列表
			
			}
		},
		computed: {
			
		},
		methods: {
			/**
			 * @param {Object} item
			 */
			inputClick(e){
				const v = e.fqty
				const zero = /^(0{2,})|[^0-9]/g
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
		
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 e.fqty = final.toString() || '0'
				})
			},
			/**
			 * 修改领料数量
			 * 领料数量不能大于剩余未发数量和库存数量
			 */
			updateFqty(item){
				let fresidueqty = item.maxCount //剩余未发数量
				let FBASEQTY = item.fbaseqty  //库存数量
				let pickCount = item.fqty //领料数量
				if(pickCount == 0){
					uni.showToast({
						title:'领料数量不能是0',
						icon:'error'
					})
						return;
				}
				if(pickCount > FBASEQTY || pickCount > fresidueqty){
					uni.showToast({
						title:'领料数量不允许大于库存数量或者剩余未发数量',
						icon:'error'
					})
						return;
				}
				updatePickCount(item).then(res => {
					if (res.data.status == 200){
						uni.showToast({
							title:'修改成功',
							icon:"none"
						})
						window.location.reload()
					}
				})
			},
			//删除领料信息
			deleteItem(item){
		
				let self = this
				uni.showModal({
					title: "提示",
					content: "确认删除吗？",
					success(res) {
						if (res.confirm) {
							deletePickMaterial({id : item.id}).then(res => {
								console.log(res)
								if (res.data.status == 200){
									self.close()
									window.location.reload()
								}
							})
						}
					}
				})
			},
			/**
			 * 扫描仓位
			 */
			scanLocation(){
				this.$refs.taskPopupRef.open()
			},
			/**
			 * @param {Object} e(仓位编码)扫码仓位成功后添加领料信息
			 */
			taskScanningSucess(e){
				let self = this;
				pickMaterial({
					materialNo : self.materialNo,
					FPRDORGID : self.FPRDORGID,
					billNo : self.billNo,
					locationNo : e
					
				}).then(res => {
					if(res.data.status == 200){
						this.$refs.commendRef.close()
					}
					self.$emit('back',true)
				})
			},
			closeInfoPop() {
				this.$refs.commendRef.close()
			},
			back(e){
				this.close()
			},
			/**
			 * 推荐仓位
			 */
			commendLocation(type){
					let self = this;
					commendLocation({
						billNo : self.billNo,
						materialNo : self.materialNo,
						bomId : self.bomId,
						FPRDORGID : self.FPRDORGID
					}).then(res =>{
						if (res.data.status == 200){
							self.commedList = res.data.data.dataList ?? []
						} 
						let param = {
							dataList : self.commedList,
							FPRDORGID : self.FPRDORGID,
							materialNo: self.materialNo,
							billNo : self.billNo,
							material : self.material
						}
						self.close()
						self.$refs.commendRef.open(param)
					})
			},
			
			

			/**
			 * 开启
			 */
			open(data) {
				let {
					title,
					dataList = [],
					type = null,
					errorList = []
				} = data;
				if (errorList && errorList.length > 0) {
					errorList.forEach((item) => {
						let index = dataList.findIndex((element) => {
							return element.boxNo === item
						})
						if (index > -1) {
							dataList[index].error = true
						}
					})
				}
				
				this.title = title;
				this.dataList = dataList;
				this.type = type;
				this.$refs.popup.open('right')
				this.materialNo = data.materialNo
				this.billNo = data.billNo
				this.FPRDORGID = data.FPRDORGID
				this.material = data.material
				this.bomId = data.bomId
			
				//循环datalist添加一个当前领料的剩余未发数量（剩余未发数量 + 领料数量）
				for(let i = 0; i < this.dataList.length; i++){
					this.dataList[i].maxCount  = this.dataList[i].fqty + this.material.fresidueqty
				}
					
			},
			

			/**
			 * 关闭画面
			 */
			close() {
				this.$refs.popup.close()
			},
	
		}
	}
</script>

<style lang="scss" scoped>
	.pop {
		display: flex;
		flex-direction: column;
		width: 600rpx;
		padding-top: 6px;
		background-color: white;
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px);
		/* #endif */
	}

	.top {
		height: 80px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #F1F1F1;
		padding-left: 10px;
		padding-bottom: 10px;
		position: relative;
	}

	.top-title {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		margin-bottom: 10px;
	}
	.top-scan{
		display: flex;
	}
	.top_btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 40px;
		top: 40px;
	}

	.top-desc {
		display: flex;
		flex-direction: column;
		color: #999;
		font-size: 14px;
	}

	.close-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 20px;
	}
	
	.scroll-height {
		/* #ifdef APP-PLUS */
		height: calc(100vh - 80px);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 80px);
		/* #endif */
	}

	.list {
		padding: 0 10px 10px;
		box-sizing: border-box;
	}

	.list-item {
		display: flex;
		flex-direction: column;
		position: relative;
		border-bottom: 1px solid #F1F1F1;
		padding: 10px;
	}

	.item-delete-btn {
		display: flex;
		flex-direction: column;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.list-item-name {
		width: calc(100%);
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.list-item-val {
		display: flex;
		flex-direction: column;
	}

	.val-title {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		color: $font-hc;
		min-width: 100rpx;
		text-align-last: justify;

		&.pt {
			padding-top: 8rpx;
		}
	}

	.font {
		color: $font-hc;
	}

	.val-traceBack {}

	.val-traceBack-item {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		margin: 0 0 10rpx 0;
		padding: 8rpx 10rpx;
		border-radius: 10rpx;
	}

	.val-traceBack-item .value {
		margin-right: 20rpx;
	}

	.val-content {
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-right: 12px;
	}
	.val-input{
		display: flex;
		flex-direction: column;
		font-size: 14px;
		margin-right: 12px;
		border-style: solid;
		border-width: 1px;
		width: 40px;
	}
	.val-button{
		display: flex;
		flex-direction: column;
		font-size: 12px;
		margin-left: 1px;
		color: $primary;
		border: 1px solid $primary;
		padding: 0 15px;
		border-radius: 4px;
		
	}

	.nowrap {
		display: flex;
		// align-items: center;
		flex-direction: column;
		font-size: 14px;
		margin-bottom: 4px;
		flex-direction: row;
	}

	.error {
		display: flex;
		flex-direction: column;
		color: red
	}
</style>
